import React, { useRef, useState } from 'react';
import ReactDOM from 'react-dom';

// hooks  专门对 函数式组件做的加强 不能用在类组件中
// 函数式组件每一次更新都会形成一个独立的闭包作用域
// useState的初始化 只会执行一次
//  useState 实现了 类似于 类组件的 setState
//  useRef  实现了 类似于 类组件的 ref
let qqq = 0;
function App() {
  console.log('render')
  let [count, setCount] = useState(() => {
    console.log("初始化count")
    return 100
  });
  let ref = useRef()
  function add() {
    setCount(count + 10)
    // qqq = count + 10
    ref.current = count + 10
  }
  function log() {
    setTimeout(() => {
      console.log(count);
      // setCount(function (n) {
      //   // 写成回调函数可以然我们获取到最新的值
      //   console.log(n);
      //   return n + 100
      // })
      setCount(ref.current += 100)
    }, 2000);
  }
  return <>
    <h2>数字是{count}</h2>
    <button onClick={add}>+</button>
    <button onClick={log}>log</button>
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))